<style type="text/css">
    #coring{width:100%;height:100%;background-size:cover;overflow: auto;background-position:center center;box-shadow: 0 0px 3px rgba(0,0,0,.5);text-align: center;}
    #coring img{
        width:100%;
        height:100%;
        overflow:auto;
    }  
    #place{
        text-align: left;
    }
    .realtime-box{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    }
    .realtime-item{
        width: 21%;
        margin: 2%;
        box-sizing: border-box;
        position: relative;
    }
    .monitor-tag{
        position: absolute;
        left: 50%;
        margin-left: -15px;
        margin-top: -15px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #6fc323;
        z-index: 2;
        border: 1px solid rgba(140, 140, 140, 0.8);
        box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7),
        0px 0px 10px 5px rgba(255, 255, 255, 0.4) inset;
    }
    .realtime-item .tag-default{
        background: #6fc323;
    }
    .realtime-item .tag-error{
         background: #9a9a9a;
     }
    .realtime-item .tag-warning{
        background: #ff5934;
    }
    .monitor-body{
        width: 100%;
        height: 100%;
        margin: auto;
        padding: 5%;
        background: #ffffff;
        border-radius: 10px;
        box-sizing: border-box;
        z-index: 1;
        border: 1px solid rgba(140, 140, 140, 0.8);
        box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7),
        0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    }
    .realtime-item .monitor-body h4{
        text-align: center;
    }
    .realtime-item .monitor-body h4:after{
        content: ' ';
        display: block;
        width: 100%;
        height: 2px;
        margin-top: 10px;
        background: -webkit-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%);
    }
    .realtime-box .monitor-body>div p{
        display: inline-block;
    }
    .realtime-box .monitor-body>div{
        padding: 0 5%;
    }
    .realtime-box .monitor-body>div{
        font-size: 20px;
    }
    .monitor-body .footer{
        /*position: absolute;*/
        margin: 0;
        left: 0;
        color: rgb(127, 124, 124);
        height: 25px;
        width: 100%;
        padding: 0px 0px 0 0;
        border-top: 1px solid rgb(219, 229, 232);
        border-radius: 0 0 10px 10px;
        z-index: 5;
        background: repeating-linear-gradient(-45deg,
        rgb(247, 247, 247) ,
        rgb(247, 247, 247) 15px,
        rgb(225, 234, 235) 15px,
        rgb(225, 234, 235) 30px,
        rgb(247, 247, 247) 30px
        );
    }
</style>
<template>
    <div id="coring">
        <Row>
            <Col span="24">
                <Card>
                    <p slot="title" id="place">河道位置（根据当前用户展示）</p>
                    <p>
                        <Col span="6">
                        <label>市：</label>
                        <Select v-model="model11" filterable>
                            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                        </Col>
                        <Col span="6">
                    县（区）：
                        <Select v-model="model12" filterable>
                            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                        </Col>
                        <Col span="6">
                    乡（镇）：
                        <Select v-model="model13" filterable>
                            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                        </Col>
                    </p>
                </Card>

            </Col>
            <Col span="24">
                    <Card>
                        <p slot="title" id="place">当前河道实时监测</p>
                    </Card>
                    <Alert show-icon id="alert" closable>
                        <template slot="desc">
                            <p  id="alert-content">根据当前登录用户管理的河流信息，进行具体展示。每3s刷新一次。
                            </p>
                        </template>
                    </Alert>                
                    <div class="realtime-box" id="realtime-box"><div class="realtime-item"><div class="monitor-tag tag-default"></div><div class="monitor-body"><h4>苏州市张家港市杨舍镇河道01</h4><div><label>当前状态：</label><p></p><p style="color:#6fc323;">监测中</p><p></p><br><label>归属：</label><p>杨舍镇 乡(镇)</p><br><label>实时温度：</label><p style="color:#6fc323;">24℃</p><br><label>水位高度检测：</label><p style="color:#6fc323">正常</p><br><label>ph值检测：</label><p style="color:#6fc323">正常</p><br><label>浊度检测：</label><p style="color:#6fc323">正常</p><br></div></div></div><div class="realtime-item"><div class="monitor-tag tag-default"></div><div class="monitor-body"><h4>     
苏州市张家港市杨舍镇河道02</h4><div><label>当前状态：</label><p></p><p style="color:#6fc323;">监测中</p><p></p><br><label>归属：</label><p>杨舍镇 乡(镇)</p><br><label>实时温度：</label><p style="color:#6fc323;">26℃</p><br><label>水位高度检测：</label><p style="color:#6fc323">正常</p><br><label>ph值检测：</label><p style="color:#6fc323">正常</p><br><label>浊度检测：</label><p style="color:#6fc323">正常</p><br></div></div></div><div class="realtime-item"><div class="monitor-tag tag-error"></div><div class="monitor-body"><h4>苏州市张家港市合兴镇河道01</h4><div><label>当前状态：</label><p>未监测</p><br><label>归属：</label><p>合兴镇 乡(镇)</p><br><label>实时温度：</label><p style="color:#6fc323;">18℃</p><br><label>水位高度检测：</label><p style="color:#6fc323">正常</p><br><label>ph值检测：</label><p style="color:#6fc323">正常</p><br><label>浊度检测：</label><p style="color:#6fc323">正常</p><br></div></div></div><div class="realtime-item"><div class="monitor-tag tag-error"></div><div class="monitor-body"><h4>苏州市张家港市合兴镇河道02</h4><div><label>当前状态：</label><p>未监测</p><br><label>归属：</label><p>合兴镇 乡(镇)</p><br><label>实时温度：</label><p style="color:#6fc323;">15℃</p><br><label>水位高度检测：</label><p style="color:#6fc323">正常</p><br><label>ph值检测：</label><p style="color:#6fc323">正常</p><br><label>浊度检测：</label><p style="color:#6fc323">正常</p><br></div></div></div></div>
            </Col>
        </Row>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                cityList: [
                    {
                        value: 'New York',
                        label: 'New York'
                    },
                    {
                        value: 'London',
                        label: 'London'
                    },
                    {
                        value: 'Sydney',
                        label: 'Sydney'
                    },
                    {
                        value: 'Ottawa',
                        label: 'Ottawa'
                    },
                    {
                        value: 'Paris',
                        label: 'Paris'
                    },
                    {
                        value: 'Canberra',
                        label: 'Canberra'
                    }
                ],
                model11: '',
                model12: [],
                model13: [],
            }
        },
        methods: {
           
        }   
    };
</script>